<template>
  <div id="full">
    <order-nav/>
    <div class="mt-10 text-center tabBackground text-black">
      <div>
        <h1 class="font-700 font-40">{{$t('请向卖家付款')}}</h1>
        <div v-if="time" class="flex justify-center items-center mt-18 font-30 font-700">
          <span>{{$t('订单将在')}}</span>
          <van-count-down class="flex font-700" :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
            </template>
          </van-count-down>
          <span>{{$t('后取消')}}</span>
        </div>
        <div class="flex justify-center items-end mt-42 font-64 font-700">
          <span class="relative bottom-5 font-48">￥</span>
          <span>{{ (totalPrice * 1).toLocaleString() }}.00</span>
          <img class="relative bottom-10 left-25 w-30 h-33" src="~@/assets/image/c2c/Group1168.png" alt="">
        </div>
        <div class="flex justify-center items-center mt-44">
          <img class="w-36 h-34 mr-22" src="~@/assets/image/c2c/Vector.png" alt="">
          <span class=" font-32">{{$t('联系卖家')}}</span>
        </div>
      </div>
    </div>
    <div class="w-full pt-46 pb-58 mt-40" style="background: #fafafa">
      <div class="ml-50 pl-38 pr-32 msg  relative">
        <div class="circle absolute top-0 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
             style="border-radius: 50%">1
        </div>
        <div
            class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
            style="border-radius: 50%">2
        </div>
        <div class="font-28">{{$t('离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。')}}</div>
        <div class="mt-50 pt-32 px-22 pb-38 bg-white rounded-2xl msg-wrapper">
          <div class="flex items-center">
            <div class="w-6 h-28 rounded-xl mr-20" style="background: #E7BB41;"></div>
            <span class="ml-8 font-30 text-black">{{$t('银行卡')}}</span>
          </div>
          <van-cell-group>
            <van-cell class="order-number"  :title="$t('姓名')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('鸿运当头')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number"  :title="$t('银行卡号')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请点击右上角按钮联系商家索取')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number" :title="$t('银行名称')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请仔细阅读下方交易条款')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                </div>
              </template>
            </van-cell>
            <van-cell class="order-number" :title="$t('开户支行')">
              <template #default>
                <div class="flex justify-end">
                  <span class="mr-14">{{$t('请按照下方交易条款提供相关资料')}}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt="">
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
        <div class="mt-39 font-28">{{$t('付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。')}}</div>
      </div>
    </div>
    <div class="mt-92 px-40 flex font-30">
      <van-button
          class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
          type="primary"
          @click="show = true"
      >{{$t('遇到问题？')}}</van-button>
      <van-button
          class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
          type="primary"
          @click="$router.push({path: '/paymentDetail'})"
      >{{$t('我已付款，通知卖家')}}</van-button>
    </div>
<!--  遇到问题  -->
    <div>
      <van-popup  class="w-full h-full" v-model="show" position="right">
        <question @back="back" :time="time"/>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
import {Cell, CellGroup, CountDown,Button,Popup,} from "vant"
import OrderNav from "@/components/order-nav/OrderNav";
import Question from "@/page/c2cOrder/payment/components/Question";

export default {
  name: "Payment",
  props: ['time'],
  data() {
    return {
     show: false,
    }
  },
  methods: {
    back() {
      this.show = false;
    }
  },
  computed: {
    ...mapState('c2cBuy', ["totalPrice"])
  },
  components: {
    [CountDown.name]: CountDown,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]:Button,
    [Popup.name]:Popup,
    OrderNav,
    Question,
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";

::v-deep {
  .van-count-down {
    font-size: 26px;
    color: $blue;
  }

  .van-cell {
    margin-top: 28px;

    .van-cell__title, .van-cell__value {
      font-size: 26px;
    }
  }
}

.msg {

  //border-left: 1px solid #EAEBEE;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 93%;
    background: #EAEBEE;
  }
}

.msg-wrapper {
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.circle {
  transform: translateX(-50%);
}

</style>